Chapter E: Beyond the Hype

┌─────────────────────────────────────────────────────────────┐
│                    Web Development Spectrum                  │
├─────────────────────────────────────────────────────────────┤
│                                                               │
│  Static HTML/CSS ──→ Progressive Enhancement ──→ SPAs        │
│  (Hugo, Jekyll)      (Astro, Eleventy)          (React, Vue) │
│                                                               │
│  ↓                   ↓                           ↓            │
│  Zero JS             Minimal JS                  Heavy JS    │
│  Perfect SEO         Great SEO                   Needs SSR   │
│  Instant load        Fast load                   Slow initial│
│  No interactivity    Selective interactivity     Full app    │
│                                                               │
└─────────────────────────────────────────────────────────────┘

Minimum React Bundle (production, gzipped):
- React core: ~6 KB
- React DOM: ~40 KB
- Your application code: 50-500+ KB
- Total: 96+ KB before your app does anything

Time to Interactive (TTI):
- Download: 100-500ms (on 3G)
- Parse/compile: 200-800ms
- Hydration: 100-500ms
- Total: 400-1800ms before interactive

Problem Complexity
     ↑
     │                                    ┌─────────────┐
     │                                    │   React     │
     │                                    │  (Complex   │
     │                                    │   Apps)     │
     │                          ┌─────────┴─────────────┤
     │                          │   Astro/Eleventy      │
     │                          │  (Progressive         │
     │                          │   Enhancement)        │
     │                ┌─────────┴───────────────────────┤
     │                │   Static HTML/CSS               │
     │                │  (Content Sites)                │
     └────────────────┴─────────────────────────────────┴──→
                                              JavaScript Complexity

Performance budget: < 1s TTI (conversion-critical)
Target audience: Global, mixed network conditions
SEO requirements: Critical (organic search is primary channel)
Team expertise: 2 developers, comfortable with HTML/CSS/JS
Maintenance capacity: Low (small team, other priorities)
Timeline: 4 weeks to launch

# Create Astro project
npm create astro@latest saas-marketing

# Project structure
src/
├── pages/
│   ├── index.astro          # Home page (static)
│   ├── features.astro       # Features page (static)
│   ├── pricing.astro        # Pricing page (static)
│   └── blog/
│       └── [...slug].astro  # Blog posts (static)
├── components/
│   ├── ContactForm.tsx      # React component (interactive)
│   └── EmailSignup.tsx      # React component (interactive)
└── layouts/
    └── Layout.astro         # Shared layout

// src/components/ContactForm.tsx
import { useState } from 'react';

export default function ContactForm() {
  const [status, setStatus] = useState<'idle' | 'submitting' | 'success' | 'error'>('idle');

  async function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
    e.preventDefault();
    setStatus('submitting');

    const formData = new FormData(e.currentTarget);

    try {
      const response = await fetch('/api/contact', {
        method: 'POST',
        body: formData,
      });

      if (response.ok) {
        setStatus('success');
      } else {
        setStatus('error');
      }
    } catch (error) {
      setStatus('error');
    }
  }

  return (
    <form onSubmit={handleSubmit} className="space-y-4">
      <input
        type="email"
        name="email"
        placeholder="Your email"
        required
        className="w-full px-4 py-2 border rounded"
      />
      <textarea
        name="message"
        placeholder="Your message"
        required
        className="w-full px-4 py-2 border rounded"
      />
      <button
        type="submit"
        disabled={status === 'submitting'}
        className="px-6 py-2 bg-blue-600 text-white rounded"
      >
        {status === 'submitting' ? 'Sending...' : 'Send Message'}
      </button>
      {status === 'success' && (
        <p className="text-green-600">Message sent successfully!</p>
      )}
      {status === 'error' && (
        <p className="text-red-600">Failed to send message. Please try again.</p>
      )}
    </form>
  );
}

---
// src/pages/contact.astro
import Layout from '../layouts/Layout.astro';
import ContactForm from '../components/ContactForm';
---

<Layout title="Contact Us">
  <h1>Get in Touch</h1>
  <p>We'd love to hear from you.</p>

  <!-- Only this component loads JavaScript -->
  <ContactForm client:load />
</Layout>

React (Next.js) approach:
- Initial bundle: 100+ KB
- TTI: 1-2s on 3G
- Build complexity: High
- Maintenance: Ongoing framework updates

Astro approach:
- Initial bundle: 0 KB (15 KB on contact page only)
- TTI: < 500ms
- Build complexity: Low
- Maintenance: Minimal

Performance budget: Flexible (internal tool, good network)
Target audience: Internal employees, modern browsers
SEO requirements: None (behind authentication)
Team expertise: 3 developers, experienced with React
Maintenance capacity: High (active development)
Timeline: 3 months to MVP, ongoing development

# Project structure
src/
├── app/
│   ├── (auth)/
│   │   ├── login/
│   │   │   └── page.tsx
│   │   └── layout.tsx
│   ├── (dashboard)/
│   │   ├── users/
│   │   │   ├── page.tsx          # User list with table
│   │   │   └── [id]/
│   │   │       └── page.tsx      # User detail
│   │   ├── products/
│   │   │   └── page.tsx
│   │   └── layout.tsx            # Dashboard layout with nav
│   └── api/
│       ├── users/
│       │   └── route.ts
│       └── auth/
│           └── [...nextauth]/
│               └── route.ts
├── components/
│   ├── tables/
│   │   └── UserTable.tsx
│   ├── forms/
│   │   └── UserForm.tsx
│   └── ui/                       # shadcn/ui components
└── lib/
    ├── api.ts                    # API client
    ├── auth.ts                   # NextAuth config
    └── store.ts                  # Zustand store

// src/components/tables/UserTable.tsx
'use client';

import { useQuery } from '@tanstack/react-query';
import {
  useReactTable,
  getCoreRowModel,
  getSortedRowModel,
  getFilteredRowModel,
  getPaginationRowModel,
  flexRender,
} from '@tanstack/react-table';
import { useState } from 'react';

interface User {
  id: string;
  name: string;
  email: string;
  role: string;
  status: 'active' | 'inactive';
}

export default function UserTable() {
  const [sorting, setSorting] = useState([]);
  const [filtering, setFiltering] = useState('');
  const [pagination, setPagination] = useState({
    pageIndex: 0,
    pageSize: 10,
  });

  // Fetch users with React Query
  const { data, isLoading, error } = useQuery({
    queryKey: ['users', pagination, sorting, filtering],
    queryFn: async () => {
      const params = new URLSearchParams({
        page: pagination.pageIndex.toString(),
        pageSize: pagination.pageSize.toString(),
        sort: JSON.stringify(sorting),
        filter: filtering,
      });
      const response = await fetch(`/api/users?${params}`);
      if (!response.ok) throw new Error('Failed to fetch users');
      return response.json();
    },
  });

  const columns = [
    {
      accessorKey: 'name',
      header: 'Name',
    },
    {
      accessorKey: 'email',
      header: 'Email',
    },
    {
      accessorKey: 'role',
      header: 'Role',
    },
    {
      accessorKey: 'status',
      header: 'Status',
      cell: ({ getValue }) => {
        const status = getValue() as string;
        return (
          <span
            className={`px-2 py-1 rounded text-sm ${
              status === 'active'
                ? 'bg-green-100 text-green-800'
                : 'bg-gray-100 text-gray-800'
            }`}
          >
            {status}
          </span>
        );
      },
    },
  ];

  const table = useReactTable({
    data: data?.users ?? [],
    columns,
    state: {
      sorting,
      globalFilter: filtering,
      pagination,
    },
    onSortingChange: setSorting,
    onGlobalFilterChange: setFiltering,
    onPaginationChange: setPagination,
    getCoreRowModel: getCoreRowModel(),
    getSortedRowModel: getSortedRowModel(),
    getFilteredRowModel: getFilteredRowModel(),
    getPaginationRowModel: getPaginationRowModel(),
    manualPagination: true,
    pageCount: data?.pageCount ?? 0,
  });

  if (isLoading) return <div>Loading users...</div>;
  if (error) return <div>Error loading users</div>;

  return (
    <div className="space-y-4">
      <input
        type="text"
        value={filtering}
        onChange={(e) => setFiltering(e.target.value)}
        placeholder="Search users..."
        className="px-4 py-2 border rounded"
      />

      <table className="w-full border-collapse">
        <thead>
          {table.getHeaderGroups().map((headerGroup) => (
            <tr key={headerGroup.id}>
              {headerGroup.headers.map((header) => (
                <th
                  key={header.id}
                  onClick={header.column.getToggleSortingHandler()}
                  className="px-4 py-2 text-left border-b cursor-pointer hover:bg-gray-50"
                >
                  {flexRender(
                    header.column.columnDef.header,
                    header.getContext()
                  )}
                  {header.column.getIsSorted() && (
                    <span className="ml-2">
                      {header.column.getIsSorted() === 'asc' ? '↑' : '↓'}
                    </span>
                  )}
                </th>
              ))}
            </tr>
          ))}
        </thead>
        <tbody>
          {table.getRowModel().rows.map((row) => (
            <tr key={row.id} className="hover:bg-gray-50">
              {row.getVisibleCells().map((cell) => (
                <td key={cell.id} className="px-4 py-2 border-b">
                  {flexRender(cell.column.columnDef.cell, cell.getContext())}
                </td>
              ))}
            </tr>
          ))}
        </tbody>
      </table>

      <div className="flex items-center justify-between">
        <div>
          Showing {table.getState().pagination.pageIndex * table.getState().pagination.pageSize + 1} to{' '}
          {Math.min(
            (table.getState().pagination.pageIndex + 1) * table.getState().pagination.pageSize,
            data?.totalCount ?? 0
          )}{' '}
          of {data?.totalCount ?? 0} users
        </div>
        <div className="flex gap-2">
          <button
            onClick={() => table.previousPage()}
            disabled={!table.getCanPreviousPage()}
            className="px-4 py-2 border rounded disabled:opacity-50"
          >
            Previous
          </button>
          <button
            onClick={() => table.nextPage()}
            disabled={!table.getCanNextPage()}
            className="px-4 py-2 border rounded disabled:opacity-50"
          >
            Next
          </button>
        </div>
      </div>
    </div>
  );
}

Performance budget: < 2s TTI (conversion-critical)
Target audience: Global, mixed network conditions
SEO requirements: Critical (organic search is primary channel)
Team expertise: 2 developers, comfortable with React
Maintenance capacity: Medium (small team, but e-commerce is core business)
Timeline: 8 weeks to launch

// src/app/products/[slug]/page.tsx
import { Suspense } from 'react';
import Image from 'next/image';
import { notFound } from 'next/navigation';
import AddToCartButton from '@/components/AddToCartButton';
import ProductReviews from '@/components/ProductReviews';

interface Product {
  id: string;
  name: string;
  description: string;
  price: number;
  images: string[];
  slug: string;
}

// Generate static paths for all products at build time
export async function generateStaticParams() {
  const products = await fetch('https://api.example.com/products').then(res => res.json());

  return products.map((product: Product) => ({
    slug: product.slug,
  }));
}

// Fetch product data at build time
async function getProduct(slug: string): Promise<Product | null> {
  const response = await fetch(`https://api.example.com/products/${slug}`, {
    next: { revalidate: 3600 }, // Revalidate every hour
  });

  if (!response.ok) return null;
  return response.json();
}

// Server Component (no JavaScript sent to client)
export default async function ProductPage({
  params,
}: {
  params: { slug: string };
}) {
  const product = await getProduct(params.slug);

  if (!product) {
    notFound();
  }

  return (
    <div className="container mx-auto px-4 py-8">
      <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
        {/* Product images - Server Component */}
        <div>
          <Image
            src={product.images[0]}
            alt={product.name}
            width={600}
            height={600}
            priority
            className="w-full rounded-lg"
          />
        </div>

        {/* Product info - Server Component */}
        <div>
          <h1 className="text-3xl font-bold mb-4">{product.name}</h1>
          <p className="text-2xl font-semibold mb-4">${product.price}</p>
          <p className="text-gray-700 mb-6">{product.description}</p>

          {/* Only this button is a Client Component */}
          <AddToCartButton productId={product.id} />
        </div>
      </div>

      {/* Reviews loaded separately to avoid blocking */}
      <Suspense fallback={<div>Loading reviews...</div>}>
        <ProductReviews productId={product.id} />
      </Suspense>
    </div>
  );
}

// src/components/AddToCartButton.tsx
'use client';

import { useCart } from '@/lib/cart-store';
import { useState } from 'react';

interface AddToCartButtonProps {
  productId: string;
}

export default function AddToCartButton({ productId }: AddToCartButtonProps) {
  const [quantity, setQuantity] = useState(1);
  const addToCart = useCart((state) => state.addItem);
  const [isAdding, setIsAdding] = useState(false);

  async function handleAddToCart() {
    setIsAdding(true);
    await addToCart(productId, quantity);
    setIsAdding(false);
  }

  return (
    <div className="flex items-center gap-4">
      <input
        type="number"
        min="1"
        value={quantity}
        onChange={(e) => setQuantity(parseInt(e.target.value))}
        className="w-20 px-3 py-2 border rounded"
      />
      <button
        onClick={handleAddToCart}
        disabled={isAdding}
        className="px-6 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 disabled:opacity-50"
      >
        {isAdding ? 'Adding...' : 'Add to Cart'}
      </button>
    </div>
  );
}

Full client-side React approach:
- Initial bundle: 150+ KB
- TTI: 2-3s on 3G
- SEO: Requires SSR, adds complexity
- Conversion rate: Baseline

Next.js with Server Components:
- Initial bundle: 20 KB
- TTI: < 1s on 3G
- SEO: Perfect (static HTML)
- Conversion rate: +15-25% (industry data for 1s faster load)

Performance budget: < 1s TTI
Target audience: Developers, global, mixed network conditions
SEO requirements: Critical (primary discovery method)
Team expertise: Open source contributors, varied skill levels
Maintenance capacity: Low (volunteer maintainers)
Timeline: Ongoing (documentation evolves with project)

# Create Astro docs site
npm create astro@latest docs-site -- --template docs

# Project structure
src/
├── content/
│   └── docs/
│       ├── getting-started/
│       │   ├── installation.md
│       │   └── quick-start.md
│       ├── guides/
│       │   └── advanced-usage.md
│       └── api/
│           └── reference.md
├── components/
│   ├── Search.tsx          # Only interactive component
│   └── VersionSelector.tsx # Only interactive component
└── pages/
    └── [...slug].astro     # Dynamic doc pages

---
// src/pages/[...slug].astro
import { getCollection } from 'astro:content';
import Layout from '../layouts/Layout.astro';
import Search from '../components/Search';

export async function getStaticPaths() {
  const docs = await getCollection('docs');
  return docs.map(doc => ({
    params: { slug: doc.slug },
    props: { doc },
  }));
}

const { doc } = Astro.props;
const { Content } = await doc.render();
---

<Layout title={doc.data.title}>
  <aside>
    <!-- Static navigation -->
    <nav>
      <!-- Table of contents -->
    </nav>
  </aside>

  <main>
    <h1>{doc.data.title}</h1>

    <!-- Markdown content rendered to HTML -->
    <Content />
  </main>

  <!-- Only search is interactive -->
  <Search client:load />
</Layout>

// src/components/Search.tsx
import { useState, useEffect } from 'react';
import Fuse from 'fuse.js';

interface SearchResult {
  title: string;
  url: string;
  excerpt: string;
}

export default function Search() {
  const [query, setQuery] = useState('');
  const [results, setResults] = useState<SearchResult[]>([]);
  const [fuse, setFuse] = useState<Fuse<SearchResult> | null>(null);

  useEffect(() => {
    // Load search index
    fetch('/search-index.json')
      .then(res => res.json())
      .then(data => {
        const fuseInstance = new Fuse(data, {
          keys: ['title', 'content'],
          threshold: 0.3,
        });
        setFuse(fuseInstance);
      });
  }, []);

  useEffect(() => {
    if (!fuse || !query) {
      setResults([]);
      return;
    }

    const searchResults = fuse.search(query).slice(0, 10);
    setResults(searchResults.map(result => result.item));
  }, [query, fuse]);

  return (
    <div className="search">
      <input
        type="search"
        value={query}
        onChange={(e) => setQuery(e.target.value)}
        placeholder="Search documentation..."
        className="w-full px-4 py-2 border rounded"
      />
      {results.length > 0 && (
        <ul className="mt-2 border rounded bg-white shadow-lg">
          {results.map((result) => (
            <li key={result.url}>
              <a href={result.url} className="block px-4 py-2 hover:bg-gray-100">
                <div className="font-semibold">{result.title}</div>
                <div className="text-sm text-gray-600">{result.excerpt}</div>
              </a>
            </li>
          ))}
        </ul>
      )}
    </div>
  );
}

Year 0-2: Hype phase
- Rapid adoption
- Breaking changes common
- Ecosystem immature
- "This will change everything!"

Year 3-5: Maturity phase
- Stable API
- Rich ecosystem
- Best practices emerge
- "This is the standard"

Year 6-10: Maintenance phase
- Fewer breaking changes
- Ecosystem consolidation
- New frameworks emerge
- "This is legacy"

Year 10+: Legacy phase
- Security updates only
- Migration pressure
- Hiring challenges
- "We need to rewrite"

┌─────────────────────────────────────────────────────────┐
│                    Your Application                      │
├─────────────────────────────────────────────────────────┤
│                                                           │
│  ┌─────────────────────────────────────────────────┐   │
│  │         Business Logic (Framework-agnostic)      │   │
│  │  - Domain models                                 │   │
│  │  - Business rules                                │   │
│  │  - Data transformations                          │   │
│  │  - Validation logic                              │   │
│  └─────────────────────────────────────────────────┘   │
│                          ↑                               │
│                          │                               │
│  ┌─────────────────────────────────────────────────┐   │
│  │         Adapter Layer (Framework-aware)          │   │
│  │  - API clients                                   │   │
│  │  - State management                              │   │
│  │  - Routing logic                                 │   │
│  └─────────────────────────────────────────────────┘   │
│                          ↑                               │
│                          │                               │
│  ┌─────────────────────────────────────────────────┐   │
│  │         UI Layer (React-specific)                │   │
│  │  - Components                                    │   │
│  │  - Hooks                                         │   │
│  │  - Event handlers                                │   │
│  └─────────────────────────────────────────────────┘   │
│                                                           │
└─────────────────────────────────────────────────────────┘

src/
├── domain/                    # Framework-agnostic business logic
│   ├── models/
│   │   ├── Order.ts
│   │   ├── Product.ts
│   │   └── Customer.ts
│   ├── services/
│   │   ├── OrderService.ts
│   │   ├── PricingService.ts
│   │   └── InventoryService.ts
│   └── validation/
│       ├── orderValidation.ts
│       └── paymentValidation.ts
├── adapters/                  # Framework-aware adapters
│   ├── api/
│   │   ├── OrderApiClient.ts
│   │   └── ProductApiClient.ts
│   ├── storage/
│   │   └── LocalStorageAdapter.ts
│   └── state/
│       └── orderStore.ts
└── ui/                        # React-specific UI
    ├── components/
    │   ├── OrderForm.tsx
    │   ├── OrderSummary.tsx
    │   └── PaymentForm.tsx
    └── hooks/
        ├── useOrder.ts
        └── useProducts.ts

// src/domain/models/Order.ts

export interface OrderItem {
  productId: string;
  quantity: number;
  priceAtPurchase: number;
}

export interface ShippingAddress {
  street: string;
  city: string;
  state: string;
  zipCode: string;
  country: string;
}

export interface Order {
  id: string;
  customerId: string;
  items: OrderItem[];
  shippingAddress: ShippingAddress;
  status: 'draft' | 'pending' | 'confirmed' | 'shipped' | 'delivered' | 'cancelled';
  subtotal: number;
  tax: number;
  shipping: number;
  total: number;
  createdAt: Date;
  updatedAt: Date;
}

export type OrderDraft = Omit<Order, 'id' | 'status' | 'createdAt' | 'updatedAt'>;

// src/domain/services/PricingService.ts

import type { OrderItem, ShippingAddress } from '../models/Order';

export class PricingService {
  private readonly TAX_RATE = 0.08; // 8% tax
  private readonly FREE_SHIPPING_THRESHOLD = 50;
  private readonly STANDARD_SHIPPING_COST = 5.99;

  calculateSubtotal(items: OrderItem[]): number {
    return items.reduce((sum, item) => {
      return sum + item.priceAtPurchase * item.quantity;
    }, 0);
  }

  calculateTax(subtotal: number): number {
    return subtotal * this.TAX_RATE;
  }

  calculateShipping(subtotal: number, address: ShippingAddress): number {
    // Free shipping over threshold
    if (subtotal >= this.FREE_SHIPPING_THRESHOLD) {
      return 0;
    }

    // International shipping costs more
    if (address.country !== 'US') {
      return this.STANDARD_SHIPPING_COST * 2;
    }

    return this.STANDARD_SHIPPING_COST;
  }

  calculateTotal(
    items: OrderItem[],
    address: ShippingAddress
  ): {
    subtotal: number;
    tax: number;
    shipping: number;
    total: number;
  } {
    const subtotal = this.calculateSubtotal(items);
    const tax = this.calculateTax(subtotal);
    const shipping = this.calculateShipping(subtotal, address);
    const total = subtotal + tax + shipping;

    return { subtotal, tax, shipping, total };
  }
}

// src/domain/validation/orderValidation.ts

import type { OrderDraft } from '../models/Order';

export interface ValidationError {
  field: string;
  message: string;
}

export class OrderValidator {
  validate(order: OrderDraft): ValidationError[] {
    const errors: ValidationError[] = [];

    // Validate items
    if (order.items.length === 0) {
      errors.push({
        field: 'items',
        message: 'Order must contain at least one item',
      });
    }

    for (const item of order.items) {
      if (item.quantity <= 0) {
        errors.push({
          field: `items.${item.productId}.quantity`,
          message: 'Quantity must be greater than 0',
        });
      }

      if (item.priceAtPurchase < 0) {
        errors.push({
          field: `items.${item.productId}.price`,
          message: 'Price cannot be negative',
        });
      }
    }

    // Validate shipping address
    if (!order.shippingAddress.street) {
      errors.push({
        field: 'shippingAddress.street',
        message: 'Street address is required',
      });
    }

    if (!order.shippingAddress.city) {
      errors.push({
        field: 'shippingAddress.city',
        message: 'City is required',
      });
    }

    if (!order.shippingAddress.zipCode) {
      errors.push({
        field: 'shippingAddress.zipCode',
        message: 'ZIP code is required',
      });
    }

    // Validate ZIP code format (US only for simplicity)
    if (order.shippingAddress.country === 'US') {
      const zipRegex = /^\d{5}(-\d{4})?$/;
      if (!zipRegex.test(order.shippingAddress.zipCode)) {
        errors.push({
          field: 'shippingAddress.zipCode',
          message: 'Invalid ZIP code format',
        });
      }
    }

    return errors;
  }

  isValid(order: OrderDraft): boolean {
    return this.validate(order).length === 0;
  }
}

// src/adapters/api/OrderApiClient.ts

import type { Order, OrderDraft } from '@/domain/models/Order';

export class OrderApiClient {
  private baseUrl: string;

  constructor(baseUrl: string = '/api') {
    this.baseUrl = baseUrl;
  }

  async createOrder(draft: OrderDraft): Promise<Order> {
    const response = await fetch(`${this.baseUrl}/orders`, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify(draft),
    });

    if (!response.ok) {
      throw new Error(`Failed to create order: ${response.statusText}`);
    }

    return response.json();
  }

  async getOrder(orderId: string): Promise<Order> {
    const response = await fetch(`${this.baseUrl}/orders/${orderId}`);

    if (!response.ok) {
      throw new Error(`Failed to fetch order: ${response.statusText}`);
    }

    return response.json();
  }

  async updateOrder(orderId: string, updates: Partial<Order>): Promise<Order> {
    const response = await fetch(`${this.baseUrl}/orders/${orderId}`, {
      method: 'PATCH',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify(updates),
    });

    if (!response.ok) {
      throw new Error(`Failed to update order: ${response.statusText}`);
    }

    return response.json();
  }

  async cancelOrder(orderId: string): Promise<Order> {
    return this.updateOrder(orderId, { status: 'cancelled' });
  }
}

// src/adapters/state/orderStore.ts

import { create } from 'zustand';
import type { OrderItem, ShippingAddress } from '@/domain/models/Order';
import { PricingService } from '@/domain/services/PricingService';
import { OrderValidator } from '@/domain/validation/orderValidation';

interface OrderState {
  items: OrderItem[];
  shippingAddress: ShippingAddress | null;

  // Computed values
  subtotal: number;
  tax: number;
  shipping: number;
  total: number;

  // Actions
  addItem: (productId: string, quantity: number, price: number) => void;
  removeItem: (productId: string) => void;
  updateQuantity: (productId: string, quantity: number) => void;
  setShippingAddress: (address: ShippingAddress) => void;
  clearOrder: () => void;

  // Validation
  validate: () => string[];
}

const pricingService = new PricingService();
const validator = new OrderValidator();

export const useOrderStore = create<OrderState>((set, get) => ({
  items: [],
  shippingAddress: null,
  subtotal: 0,
  tax: 0,
  shipping: 0,
  total: 0,

  addItem: (productId, quantity, price) => {
    set((state) => {
      const existingItem = state.items.find(item => item.productId === productId);

      let newItems: OrderItem[];
      if (existingItem) {
        newItems = state.items.map(item =>
          item.productId === productId
            ? { ...item, quantity: item.quantity + quantity }
            : item
        );
      } else {
        newItems = [
          ...state.items,
          { productId, quantity, priceAtPurchase: price },
        ];
      }

      const pricing = state.shippingAddress
        ? pricingService.calculateTotal(newItems, state.shippingAddress)
        : { subtotal: 0, tax: 0, shipping: 0, total: 0 };

      return {
        items: newItems,
        ...pricing,
      };
    });
  },

  removeItem: (productId) => {
    set((state) => {
      const newItems = state.items.filter(item => item.productId !== productId);

      const pricing = state.shippingAddress
        ? pricingService.calculateTotal(newItems, state.shippingAddress)
        : { subtotal: 0, tax: 0, shipping: 0, total: 0 };

      return {
        items: newItems,
        ...pricing,
      };
    });
  },

  updateQuantity: (productId, quantity) => {
    set((state) => {
      const newItems = state.items.map(item =>
        item.productId === productId
          ? { ...item, quantity }
          : item
      );

      const pricing = state.shippingAddress
        ? pricingService.calculateTotal(newItems, state.shippingAddress)
        : { subtotal: 0, tax: 0, shipping: 0, total: 0 };

      return {
        items: newItems,
        ...pricing,
      };
    });
  },

  setShippingAddress: (address) => {
    set((state) => {
      const pricing = pricingService.calculateTotal(state.items, address);

      return {
        shippingAddress: address,
        ...pricing,
      };
    });
  },

  clearOrder: () => {
    set({
      items: [],
      shippingAddress: null,
      subtotal: 0,
      tax: 0,
      shipping: 0,
      total: 0,
    });
  },

  validate: () => {
    const state = get();

    if (!state.shippingAddress) {
      return ['Shipping address is required'];
    }

    const errors = validator.validate({
      customerId: '', // Would come from auth context
      items: state.items,
      shippingAddress: state.shippingAddress,
      subtotal: state.subtotal,
      tax: state.tax,
      shipping: state.shipping,
      total: state.total,
    });

    return errors.map(error => error.message);
  },
}));

// src/ui/components/OrderForm.tsx
'use client';

import { useState } from 'react';
import { useOrderStore } from '@/adapters/state/orderStore';
import { OrderApiClient } from '@/adapters/api/OrderApiClient';

const apiClient = new OrderApiClient();

export default function OrderForm() {
  const {
    items,
    shippingAddress,
    subtotal,
    tax,
    shipping,
    total,
    setShippingAddress,
    validate,
    clearOrder,
  } = useOrderStore();

  const [formData, setFormData] = useState({
    street: '',
    city: '',
    state: '',
    zipCode: '',
    country: 'US',
  });

  const [errors, setErrors] = useState<string[]>([]);
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [orderConfirmed, setOrderConfirmed] = useState(false);

  function handleInputChange(e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>) {
    const { name, value } = e.target;
    setFormData(prev => ({ ...prev, [name]: value }));
  }

  function handleAddressSubmit(e: React.FormEvent) {
    e.preventDefault();
    setShippingAddress(formData);
  }

  async function handleOrderSubmit() {
    const validationErrors = validate();

    if (validationErrors.length > 0) {
      setErrors(validationErrors);
      return;
    }

    setIsSubmitting(true);
    setErrors([]);

    try {
      await apiClient.createOrder({
        customerId: 'current-user-id', // Would come from auth context
        items,
        shippingAddress: shippingAddress!,
        subtotal,
        tax,
        shipping,
        total,
      });

      setOrderConfirmed(true);
      clearOrder();
    } catch (error) {
      setErrors(['Failed to submit order. Please try again.']);
    } finally {
      setIsSubmitting(false);
    }
  }

  if (orderConfirmed) {
    return (
      <div className="p-6 bg-green-50 border border-green-200 rounded">
        <h2 className="text-2xl font-bold text-green-800 mb-2">
          Order Confirmed!
        </h2>
        <p className="text-green-700">
          Thank you for your order. You'll receive a confirmation email shortly.
        </p>
      </div>
    );
  }

  return (
    <div className="max-w-2xl mx-auto p-6">
      <h1 className="text-3xl font-bold mb-6">Checkout</h1>

      {/* Order items summary */}
      <div className="mb-8">
        <h2 className="text-xl font-semibold mb-4">Order Items</h2>
        {items.length === 0 ? (
          <p className="text-gray-600">Your cart is empty</p>
        ) : (
          <ul className="space-y-2">
            {items.map((item) => (
              <li key={item.productId} className="flex justify-between">
                <span>Product {item.productId} × {item.quantity}</span>
                <span>${(item.priceAtPurchase * item.quantity).toFixed(2)}</span>
              </li>
            ))}
          </ul>
        )}
      </div>

      {/* Shipping address form */}
      <form onSubmit={handleAddressSubmit} className="mb-8">
        <h2 className="text-xl font-semibold mb-4">Shipping Address</h2>

        <div className="space-y-4">
          <input
            type="text"
            name="street"
            value={formData.street}
            onChange={handleInputChange}
            placeholder="Street Address"
            required
            className="w-full px-4 py-2 border rounded"
          />

          <div className="grid grid-cols-2 gap-4">
            <input
              type="text"
              name="city"
              value={formData.city}
              onChange={handleInputChange}
              placeholder="City"
              required
              className="px-4 py-2 border rounded"
            />

            <input
              type="text"
              name="state"
              value={formData.state}
              onChange={handleInputChange}
              placeholder="State"
              required
              className="px-4 py-2 border rounded"
            />
          </div>

          <div className="grid grid-cols-2 gap-4">
            <input
              type="text"
              name="zipCode"
              value={formData.zipCode}
              onChange={handleInputChange}
              placeholder="ZIP Code"
              required
              className="px-4 py-2 border rounded"
            />

            <select
              name="country"
              value={formData.country}
              onChange={handleInputChange}
              className="px-4 py-2 border rounded"
            >
              <option value="US">United States</option>
              <option value="CA">Canada</option>
              <option value="MX">Mexico</option>
            </select>
          </div>
        </div>

        <button
          type="submit"
          className="mt-4 px-6 py-2 bg-blue-600 text-white rounded hover:bg-blue-700"
        >
          Calculate Shipping
        </button>
      </form>

      {/* Order summary */}
      {shippingAddress && (
        <div className="mb-8 p-4 bg-gray-50 rounded">
          <h2 className="text-xl font-semibold mb-4">Order Summary</h2>

          <div className="space-y-2">
            <div className="flex justify-between">
              <span>Subtotal:</span>
              <span>${subtotal.toFixed(2)}</span>
            </div>
            <div className="flex justify-between">
              <span>Tax:</span>
              <span>${tax.toFixed(2)}</span>
            </div>
            <div className="flex justify-between">
              <span>Shipping:</span>
              <span>{shipping === 0 ? 'FREE' : `$${shipping.toFixed(2)}`}</span>
            </div>
            <div className="flex justify-between font-bold text-lg pt-2 border-t">
              <span>Total:</span>
              <span>${total.toFixed(2)}</span>
            </div>
          </div>
        </div>
      )}

      {/* Errors */}
      {errors.length > 0 && (
        <div className="mb-4 p-4 bg-red-50 border border-red-200 rounded">
          <ul className="list-disc list-inside text-red-700">
            {errors.map((error, index) => (
              <li key={index}>{error}</li>
            ))}
          </ul>
        </div>
      )}

      {/* Submit button */}
      <button
        onClick={handleOrderSubmit}
        disabled={!shippingAddress || items.length === 0 || isSubmitting}
        className="w-full px-6 py-3 bg-green-600 text-white rounded-lg hover:bg-green-700 disabled:opacity-50 disabled:cursor-not-allowed"
      >
        {isSubmitting ? 'Processing...' : 'Place Order'}
      </button>
    </div>
  );
}

Total codebase: 1000 lines
- Business logic: 400 lines (0% rewrite needed)
- Adapters: 300 lines (20% rewrite needed)
- UI components: 300 lines (100% rewrite needed)

Total rewrite: ~360 lines (36% of codebase)

Typical React app: 1000 lines
- Mixed business logic + UI: 1000 lines (80-100% rewrite needed)

Total rewrite: ~800-1000 lines (80-100% of codebase)

// src/domain/services/PricingService.test.ts

import { describe, it, expect } from 'vitest';
import { PricingService } from './PricingService';
import type { OrderItem, ShippingAddress } from '../models/Order';

describe('PricingService', () => {
  const service = new PricingService();

  const sampleItems: OrderItem[] = [
    { productId: '1', quantity: 2, priceAtPurchase: 10 },
    { productId: '2', quantity: 1, priceAtPurchase: 30 },
  ];

  const usAddress: ShippingAddress = {
    street: '123 Main St',
    city: 'New York',
    state: 'NY',
    zipCode: '10001',
    country: 'US',
  };

  describe('calculateSubtotal', () => {
    it('calculates subtotal correctly', () => {
      const subtotal = service.calculateSubtotal(sampleItems);
      expect(subtotal).toBe(50); // (2 * 10) + (1 * 30)
    });

    it('returns 0 for empty cart', () => {
      const subtotal = service.calculateSubtotal([]);
      expect(subtotal).toBe(0);
    });
  });

  describe('calculateTax', () => {
    it('calculates 8% tax', () => {
      const tax = service.calculateTax(100);
      expect(tax).toBe(8);
    });
  });

  describe('calculateShipping', () => {
    it('charges standard shipping for orders under $50', () => {
      const shipping = service.calculateShipping(40, usAddress);
      expect(shipping).toBe(5.99);
    });

    it('provides free shipping for orders over $50', () => {
      const shipping = service.calculateShipping(60, usAddress);
      expect(shipping).toBe(0);
    });

    it('doubles shipping cost for international orders', () => {
      const intlAddress = { ...usAddress, country: 'CA' };
      const shipping = service.calculateShipping(40, intlAddress);
      expect(shipping).toBe(11.98); // 5.99 * 2
    });
  });

  describe('calculateTotal', () => {
    it('calculates complete order total', () => {
      const result = service.calculateTotal(sampleItems, usAddress);

      expect(result.subtotal).toBe(50);
      expect(result.tax).toBe(4); // 8% of 50
      expect(result.shipping).toBe(0); // Free shipping over $50
      expect(result.total).toBe(54); // 50 + 4 + 0
    });
  });
});

src/
├── components/
│   ├── OrderForm.tsx
│   ├── ProductList.tsx
│   └── UserProfile.tsx
├── hooks/
│   ├── useOrder.ts
│   ├── useProducts.ts
│   └── useUser.ts
├── api/
│   ├── orders.ts
│   ├── products.ts
│   └── users.ts
└── utils/
    ├── validation.ts
    └── formatting.ts

src/
├── orders/
│   ├── domain/
│   │   ├── Order.ts
│   │   ├── OrderService.ts
│   │   └── orderValidation.ts
│   ├── adapters/
│   │   ├── OrderApiClient.ts
│   │   └── orderStore.ts
│   └── ui/
│       ├── OrderForm.tsx
│       └── OrderSummary.tsx
├── products/
│   ├── domain/
│   │   ├── Product.ts
│   │   └── ProductService.ts
│   ├── adapters/
│   │   └── ProductApiClient.ts
│   └── ui/
│       └── ProductList.tsx
└── users/
    ├── domain/
    │   ├── User.ts
    │   └── UserService.ts
    ├── adapters/
    │   └── UserApiClient.ts
    └── ui/
        └── UserProfile.tsx